<template>
	<div>
		<div class="wrap">
			<div class="tableWrap">
				<div class="searchWrap">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
					  <el-date-picker
					        v-model="formInline.createTime"
					        align="right"
					        type="date"
							value-format="yyyy-MM-dd"
					        placeholder="选择日期">
					      </el-date-picker>
					    <el-button type="primary" class="searchBtn" @click="onSearch">查询</el-button>
					  </el-form-item>
					</el-form>
				</div>
				<tableInfo ref="table" :table="table">
					
				</tableInfo>
				<div class="paginationWrap">
					<pageCon ref="page" :total="total" @changePage="changePage"></pageCon>
				</div>
			</div>
			<div class="formWrap">
				<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
					<!-- <el-form-item label="营收类型" prop="businessTypeName">
						<el-radio-group v-model="form.businessTypeName">
							<el-radio v-for="(item, index) in businessTypeList" :key="index" :label="item.label" :value="item.id"></el-radio>
						</el-radio-group>
					</el-form-item> -->
					
					<el-form-item label="地址类型" prop="jsfIncomeType">
						<el-radio-group v-model="form.jsfIncomeType" @change="jsfTypeChange">
							<el-radio v-for="(item, index) in addressTypeList" :key="index" :label="item.label" :value="item.id"></el-radio>
						</el-radio-group>
					</el-form-item>
					
					<el-form-item v-if="form.jsfIncomeType=='饮料'" label="商品" prop="goodsId">
					    <el-select v-model="form.goodsId" placeholder="请选择" @change="goodsChange">
					      <el-option v-for="(item,index) in goodsList" :label="item.goodsName" :value="item.id"></el-option>
					    </el-select>
					  </el-form-item>
					  
					  <el-form-item  v-if="form.jsfIncomeType=='饮料'" label="总量" prop="goodsNum">
					  	<el-input-number v-model="curGoods.goodsNum" disabled label="描述文字"></el-input-number>
					  </el-form-item> 
					  
				  <el-form-item  v-if="form.jsfIncomeType=='饮料'" label="数量" prop="num">
					<el-input-number :disabled="form.goodsId == '' " v-model="num" @change="handleChange" :min="1" :max="curGoods.goodsNum" label="描述文字"></el-input-number>
				  </el-form-item>
					  
					<el-form-item  v-if="form.jsfIncomeType!='饮料'" label="名称" prop="goodsName">
						<el-input v-model="form.goodsName"></el-input>
					</el-form-item>
			
					<el-form-item label="金额" prop="goodsPrice"><el-input v-model="form.goodsPrice" type="number"></el-input></el-form-item>
			
					<el-form-item label="备注" prop="remarks"><el-input v-model="form.remarks" type="text"></el-input></el-form-item>
			
					<el-form-item>
						<el-button type="" @click="reset('form')">重置</el-button>
						<el-button type="primary" @click="onSubmit('form')">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import tableInfo from '../../../components/table.vue';
import pageCon from '../../../components/page.vue';

import api from '@/api';
export default {
	components: {
		tableInfo,
		pageCon
	},
	props: {
	
	},
	data() {
		return {
			num:'',
			curGoods:{},
			goodsList:[],
			formInline:{
				createTime:'',
			},
			addressTypeList: [
				{
					label: '健身卡',
					id: 1
				},
				{
					label: '饮料',
					id: 2
				},
				{
					label: '其它',
					id: 3
				}
			],
			businessTypeList: [
				{
					label: '收入',
					id: 1
				},
				{
					label: '支出',
					id: -1
				}
			],
			form: {
				businessTypeName: '收入',
				businessType: 1,
				jsfIncomeType: '健身卡',
				addressType: 1,
				goodsId:'',
				goodsName: '',
				goodsPrice: '',
				remarks: '',
				goodsNum:''
			},
			rules: {
				goodsName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				goodsPrice: [{ required: true, message: '请输入金额', trigger: 'blur' }],
				goodsId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
				
			},
			table: {
				loading: false,
				hasSelect: false,
				hasClickEvent: false,
				highlight: true,
				labelProps: [
					{ label: '日期', prop: 'createTime',width:200 },
					{ label: '名称', prop: 'goodsName' },
					{ label: '金额', prop: 'goodsPrice' },
					{ label: "备注", prop: "remarks" },
				],
				data: []
			},
			total: 0,
			pageNo:1
		};
	},
	mounted() {
		this.getGoods()
	},
	methods: {
		jsfTypeChange(val){
			// alert(val)
			
			this.form.goodsId = ''
			this.form.goodsName =  ''
			this.form.goodsPrice =  ''
			this.form.remarks =  ''
			this.form.goodsNum = ''
			this.curGoods = ''
			this.$refs['form'].resetFields();
			this.form.jsfIncomeType = val
		},
		edit(obj){
			console.log(obj);
		},
		handleChange(val){
			console.log(val);
			this.form.goodsPrice = val*this.curGoods.goodsPrice
		},
		goodsChange(val){
			this.form.goodsId = val
			this.curGoods = this.checkGoods(val,this.goodsList)
			this.form.goodsName = this.curGoods.goodsName
			this.form.goodsPrice = this.num*this.curGoods.goodsPrice
			console.log(this.curGoods);
		},
		checkGoods(id, list) {
			for (let index = 0; index < list.length; index++) {
				const element = list[index];
				if (element.id == id) {
					return element;
				}
			}
			return '';
		},
		onSearch(){
			this.pageNo = 1
			 this.initList();
		},
		changePage(val) {
		  this.currentPage = val;
		  this.pageNo = val
		  this.initList(val);
		},
		getGoods(){
			api.goods.getGoods({
				pageNo:1, 
				pageSize:100
				})
				.then(res => {
					this.goodsList = res.data.result;
					this.total = res.data.total
				});
		},
		initList() {
			api.income.getIncome({ 
				pageNo:this.pageNo, 
				pageSize:10,
				goodsName:'',
				startTime: this.formInline.createTime && this.formInline.createTime+' 00:00:00',
				stopTime: this.formInline.createTime && this.formInline.createTime+' 23:59:59' ,
				addressType: 1,
				isTest: ''
				})
				.then(res => {
					this.table.data = res.data.result;
					this.total = res.data.total
				});
		},
		checkAddressType(label, list) {
			for (let index = 0; index < list.length; index++) {
				const element = list[index];
				if (element.label == label) {
					return element.id;
				}
			}
			return '';
		}, 
		onSubmit(formName) {

			// this.form.addressType = this.checkAddressType(this.form.addressTypeName, this.addressTypeList);
			// this.form.businessType = this.checkAddressType(this.form.businessTypeName, this.businessTypeList);
			// console.log(this.form);
			this.form.goodsNum = this.curGoods.goodsNum-this.num
			this.$refs[formName].validate(valid => {
				if (valid) {
					api.income.addIncome(this.form).then(res => {
						if (res.success) {
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.initList()
							this.$refs[formName].resetFields();
							this.curGoods.goodsNum = 0
							this.form.goodsName= ''
							this.num = 1
							this.getGoods()
						} else {
							this.$message(res.msg);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		reset(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style scoped>
	.wrap{
		display: flex;
	}
	
	.tableWrap{
		margin-right: 100px;
	}
	.searchWrap{
		text-align: left;
		margin: 20px 0;
	}
	.searchBtn{
		margin-left: 20px;
	}
	.paginationWrap{
		margin: 50px 0;
	}
	
	.formWrap /deep/ .el-form-item__content{
		text-align: left;
	}
</style>
